<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>swiper轮播合集</title>
		<link rel="stylesheet" type="text/css" href="./css/swiper.css">
		<script src="./js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			p {
				text-align: center;
			}

			img {
				width: 100%;
				height: 100%;
			}

			.swiper-container {
				width: 43.75rem;
				height: 18.125rem;
				margin: 0 auto;
			}

			.swiper-button-next {
				right: 20px;
				left: auto;
			}

			.swiper-button-prev {
				left: 20px;
				right: auto;
			}

			/* css定义分页，导航按钮颜色 */
			#case5 {
				--swiper-theme-color: #ff6600;
				--swiper-pagination-color: #00ff33;
				/* 两种都可以 */
			}

			#case6 img,
			#case7 img {
				transform: scale(0.7);
			}

			#case7 {
				width: auto;
			}
		</style>
	</head>
	<body>
		<p>水平切换</p>
		<div class="swiper-container swiper-container-initialized swiper-container-horizontal" id="case1">
			<div class="swiper-wrapper" style="transform: translate3d(-700px, 0px, 0px); transition-duration: 2000ms;">
				<div class="swiper-slide swiper-slide-prev" style="width: 700px;">
					<img src="./img/t1.png">
				</div>
				<div class="swiper-slide swiper-slide-active" style="width: 700px;">
					<img src="./img/t2.png"></div>
				<div class="swiper-slide swiper-slide-next" style="width: 700px;">
					<img src="./img/t4.png">
				</div>
			</div>
			<!-- 导航按钮 上一页下一页 -->
			<div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"
				aria-disabled="false"></div>
			<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-disabled="false">
			</div>
			<!-- 分页器 -->
			<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
				<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span>
				<span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button"
					aria-label="Go to slide 2"></span>
					<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span>
				</div>
			<!-- 滚动条 -->
			<div class="swiper-scrollbar" style="opacity: 0; transition-duration: 400ms;">
				<div class="swiper-scrollbar-drag"
					style="width: 228.667px; transform: translate3d(228.667px, 0px, 0px); transition-duration: 2000ms;">
				</div>
			</div>
			<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
		</div>

		<p>垂直切换</p>
		<div class="swiper-container swiper-container-initialized swiper-container-vertical" id="case2">
			<div class="swiper-wrapper" style="transform: translate3d(0px, -290px, 0px); transition-duration: 2000ms;">
				<div class="swiper-slide swiper-slide-prev" style="height: 290px;"><img src="./img/t1.png">
				</div>
				<div class="swiper-slide swiper-slide-active" style="height: 290px;"><img
						src="./img/t2.png"></div>
				<div class="swiper-slide swiper-slide-next" style="height: 290px;"><img src="./img/t4.png">
				</div>
			</div>
			<!-- 导航按钮 上一页下一页 -->
			<div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"
				aria-disabled="false"></div>
			<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-disabled="false">
			</div>
			<!-- 分页器 -->
			<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"><span
					class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span><span
					class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button"
					aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet" tabindex="0" role="button"
					aria-label="Go to slide 3"></span></div>
			<!-- 滚动条 -->
			<div class="swiper-scrollbar" style="opacity: 0; transition-duration: 400ms;">
				<div class="swiper-scrollbar-drag"
					style="height: 94.6667px; transform: translate3d(0px, 94.6667px, 0px); transition-duration: 2000ms;">
				</div>
			</div>
			<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
		</div>

		<p>视差轮播</p>
		<div class="swiper-container swiper-container-initialized swiper-container-horizontal" id="case3">
			<div class="swiper-wrapper" style="transition-duration: 2000ms; transform: translate3d(-2800px, 0px, 0px);">
				<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="5" style="width: 700px;"><img
						src="./img/t6.png" data-swiper-parallax-scale="0.15"
						data-swiper-parallax-opacity="0.5"
						style="transition-duration: 2000ms; opacity: 0.5; transform: translate3d(0px, 0px, 0px) scale(0.15);">
				</div>
				<div class="swiper-slide" data-swiper-slide-index="0" style="width: 700px;"><img
						src="./img/t1.png" data-swiper-parallax-scale="0.15"
						data-swiper-parallax-opacity="0.5"
						style="transition-duration: 2000ms; opacity: 0.5; transform: translate3d(0px, 0px, 0px) scale(0.15);">
				</div>
				<div class="swiper-slide" data-swiper-slide-index="1" style="width: 700px;"><img
						src="./img/t2.png" data-swiper-parallax-scale="0.15"
						data-swiper-parallax-opacity="0.5"
						style="transition-duration: 2000ms; opacity: 0.5; transform: translate3d(0px, 0px, 0px) scale(0.15);">
				</div>
				<div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="2" style="width: 700px;"><img
						src="./img/t3.png" data-swiper-parallax-scale="0.15"
						data-swiper-parallax-opacity="0.5"
						style="transition-duration: 2000ms; opacity: 0.5; transform: translate3d(0px, 0px, 0px) scale(0.15);">
				</div>
				<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="3" style="width: 700px;"><img
						src="./img/t4.png" data-swiper-parallax-scale="0.15"
						data-swiper-parallax-opacity="0.5"
						style="transition-duration: 2000ms; opacity: 1; transform: translate3d(0px, 0px, 0px) scale(1);">
				</div>
				<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="4" style="width: 700px;"><img
						src="./img/t5.png" data-swiper-parallax-scale="0.15"
						data-swiper-parallax-opacity="0.5"
						style="transition-duration: 2000ms; opacity: 0.5; transform: translate3d(0px, 0px, 0px) scale(0.15);">
				</div>
				<div class="swiper-slide" data-swiper-slide-index="5" style="width: 700px;"><img
						src="./img/t6.png" data-swiper-parallax-scale="0.15"
						data-swiper-parallax-opacity="0.5"
						style="transition-duration: 2000ms; opacity: 0.5; transform: translate3d(0px, 0px, 0px) scale(0.15);">
				</div>
				<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0" style="width: 700px;"><img
						src="./img/t1.png" data-swiper-parallax-scale="0.15"
						data-swiper-parallax-opacity="0.5"
						style="transition-duration: 2000ms; opacity: 0.5; transform: translate3d(0px, 0px, 0px) scale(0.15);">
				</div>
			</div>
			<!-- 导航按钮 上一页下一页 -->
			<div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
			<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"></div>
			<!-- 分页器 -->
			<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"><span
					class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span><span
					class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span
					class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span><span
					class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button"
					aria-label="Go to slide 4"></span><span class="swiper-pagination-bullet" tabindex="0" role="button"
					aria-label="Go to slide 5"></span><span class="swiper-pagination-bullet" tabindex="0" role="button"
					aria-label="Go to slide 6"></span></div>
			<!-- 滚动条 -->
			<div class="swiper-scrollbar" style="opacity: 0; transition-duration: 400ms;">
				<div class="swiper-scrollbar-drag"
					style="transform: translate3d(343px, 0px, 0px); width: 85.75px; transition-duration: 2000ms;"></div>
			</div>
			<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
		</div>

		<p>幻灯片</p>
		<div class="swiper-container swiper-container-initialized swiper-container-horizontal" id="case4">
			<div class="swiper-wrapper"
				style="transition-duration: 2000ms; transform: translate3d(-1166.67px, 0px, 0px);">
				<div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active"
					data-swiper-slide-index="3" style="width: 233.333px;"><img src="./img/t4.png"></div>
				<div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="4"
					style="width: 233.333px;"><img src="./img/t5.png"></div>
				<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="5" style="width: 233.333px;">
					<img src="./img/t6.png"></div>
				<div class="swiper-slide" data-swiper-slide-index="0" style="width: 233.333px;"><img
						src="./img/t1.png"></div>
				<div class="swiper-slide" data-swiper-slide-index="1" style="width: 233.333px;"><img
						src="./img/t2.png"></div>
				<div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="2" style="width: 233.333px;"><img
						src="./img/t3.png"></div>
				<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="3" style="width: 233.333px;"><img
						src="./img/t4.png"></div>
				<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="4" style="width: 233.333px;"><img
						src="./img/t5.png"></div>
				<div class="swiper-slide" data-swiper-slide-index="5" style="width: 233.333px;"><img
						src="./img/t6.png"></div>
				<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0" style="width: 233.333px;">
					<img src="./img/t1.png"></div>
				<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="1" style="width: 233.333px;">
					<img src="./img/t2.png"></div>
				<div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-prev" data-swiper-slide-index="2"
					style="width: 233.333px;"><img src="./img/t3.png"></div>
			</div>
			<!-- 导航按钮 上一页下一页 -->
			<div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
			<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"></div>
			<!-- 分页器 -->
			<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"><span
					class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span><span
					class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span
					class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span><span
					class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button"
					aria-label="Go to slide 4"></span><span class="swiper-pagination-bullet" tabindex="0" role="button"
					aria-label="Go to slide 5"></span><span class="swiper-pagination-bullet" tabindex="0" role="button"
					aria-label="Go to slide 6"></span></div>
			<!-- 滚动条 -->
			<div class="swiper-scrollbar" style="opacity: 0; transition-duration: 400ms;">
				<div class="swiper-scrollbar-drag"
					style="transform: translate3d(285.833px, 0px, 0px); width: 171.5px; transition-duration: 2000ms;">
				</div>
			</div>
			<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
		</div>

		<p>渐变轮播</p>
		<div class="swiper-container swiper-container-fade swiper-container-initialized swiper-container-horizontal"
			id="case5">
			<div class="swiper-wrapper" style="transition-duration: 0ms;">
				<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="5"
					style="width: 700px; transition-duration: 0ms; opacity: 1; transform: translate3d(0px, 0px, 0px);">
					<img src="./img/t6.png" data-swiper-parallax-scale="1.15"
						style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px) scale(1.15);"></div>
				<div class="swiper-slide" data-swiper-slide-index="0"
					style="width: 700px; transition-duration: 0ms; opacity: 1; transform: translate3d(-700px, 0px, 0px);">
					<img src="./img/t1.png" data-swiper-parallax-scale="1.15"
						style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px) scale(1.15);"></div>
				<div class="swiper-slide" data-swiper-slide-index="1"
					style="width: 700px; transition-duration: 0ms; opacity: 1; transform: translate3d(-1400px, 0px, 0px);">
					<img src="./img/t2.png" data-swiper-parallax-scale="1.15"
						style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px) scale(1.15);"></div>
				<div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="2"
					style="width: 700px; transition-duration: 0ms; opacity: 1; transform: translate3d(-2100px, 0px, 0px);">
					<img src="./img/t3.png" data-swiper-parallax-scale="1.15"
						style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px) scale(1.15);"></div>
				<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="3"
					style="width: 700px; transition-duration: 0ms; opacity: 1; transform: translate3d(-2800px, 0px, 0px);">
					<img src="./img/t4.png" data-swiper-parallax-scale="1.15"
						style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px) scale(1);"></div>
				<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="4"
					style="width: 700px; transition-duration: 0ms; opacity: 0; transform: translate3d(-3500px, 0px, 0px);">
					<img src="./img/t5.png" data-swiper-parallax-scale="1.15"
						style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px) scale(1.15);"></div>
				<div class="swiper-slide" data-swiper-slide-index="5"
					style="width: 700px; transition-duration: 0ms; opacity: 0; transform: translate3d(-4200px, 0px, 0px);">
					<img src="./img/t6.png" data-swiper-parallax-scale="1.15"
						style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px) scale(1.15);"></div>
				<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0"
					style="width: 700px; transition-duration: 0ms; opacity: 0; transform: translate3d(-4900px, 0px, 0px);">
					<img src="./img/t1.png" data-swiper-parallax-scale="1.15"
						style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px) scale(1.15);"></div>
			</div>
			<!-- 导航按钮 上一页下一页 -->
			<div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
			<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"></div>
			<!-- 分页器 -->
			<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-bullets-dynamic"
				style="width: 80px;"><span class="swiper-pagination-bullet" tabindex="0" role="button"
					aria-label="Go to slide 1" style="left: -16px;"></span><span
					class="swiper-pagination-bullet swiper-pagination-bullet-active-prev-prev" tabindex="0"
					role="button" aria-label="Go to slide 2" style="left: -16px;"></span><span
					class="swiper-pagination-bullet swiper-pagination-bullet-active-prev" tabindex="0" role="button"
					aria-label="Go to slide 3" style="left: -16px;"></span><span
					class="swiper-pagination-bullet swiper-pagination-bullet-active swiper-pagination-bullet-active-main"
					tabindex="0" role="button" aria-label="Go to slide 4" style="left: -16px;"></span><span
					class="swiper-pagination-bullet swiper-pagination-bullet-active-next" tabindex="0" role="button"
					aria-label="Go to slide 5" style="left: -16px;"></span><span
					class="swiper-pagination-bullet swiper-pagination-bullet-active-next-next" tabindex="0"
					role="button" aria-label="Go to slide 6" style="left: -16px;"></span></div>
			<!-- 滚动条 -->
			<div class="swiper-scrollbar" style="opacity: 0; transition-duration: 400ms;">
				<div class="swiper-scrollbar-drag"
					style="transform: translate3d(343px, 0px, 0px); width: 85.75px; transition-duration: 0ms;"></div>
			</div>
			<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
		</div>

		<p>立方轮播</p>
		<div class="swiper-container swiper-container-cube swiper-container-3d swiper-container-initialized swiper-container-horizontal"
			id="case6">
			<div class="swiper-wrapper"
				style="transition-duration: 0ms; transform-origin: 50% 50% -350px; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(-270deg);">
				<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="5"
					style="width: 700px; transition-duration: 0ms; transform: rotateX(0deg) rotateY(0deg) translate3d(0px, 0px, 0px);">
					<img src="./img/t6.png">
					<div class="swiper-slide-shadow-left" style="opacity: 0; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 1; transition-duration: 0ms;"></div>
				</div>
				<div class="swiper-slide" data-swiper-slide-index="0"
					style="width: 700px; transition-duration: 0ms; transform: rotateX(0deg) rotateY(90deg) translate3d(0px, 0px, 0px);">
					<img src="./img/t1.png">
					<div class="swiper-slide-shadow-left" style="opacity: 0; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 1; transition-duration: 0ms;"></div>
				</div>
				<div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="1"
					style="width: 700px; transition-duration: 0ms; transform: rotateX(0deg) rotateY(180deg) translate3d(700px, 0px, 700px);">
					<img src="./img/t2.png">
					<div class="swiper-slide-shadow-left" style="opacity: 0; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 1; transition-duration: 0ms;"></div>
				</div>
				<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="2"
					style="width: 700px; transition-duration: 0ms; transform: rotateX(0deg) rotateY(270deg) translate3d(-700px, 0px, 2100px);">
					<img src="./img/t3.png">
					<div class="swiper-slide-shadow-left" style="opacity: 0; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 0; transition-duration: 0ms;"></div>
				</div>
				<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="3"
					style="width: 700px; transition-duration: 0ms; transform: rotateX(0deg) rotateY(360deg) translate3d(-2800px, 0px, 0px);">
					<img src="./img/t4.png">
					<div class="swiper-slide-shadow-left" style="opacity: 1; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 0; transition-duration: 0ms;"></div>
				</div>
				<div class="swiper-slide" data-swiper-slide-index="4"
					style="width: 700px; transition-duration: 0ms; transform: rotateX(0deg) rotateY(450deg) translate3d(0px, 0px, -2800px);">
					<img src="./img/t5.png">
					<div class="swiper-slide-shadow-left" style="opacity: 1; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 0; transition-duration: 0ms;"></div>
				</div>
				<div class="swiper-slide" data-swiper-slide-index="5"
					style="width: 700px; transition-duration: 0ms; transform: rotateX(0deg) rotateY(540deg) translate3d(3500px, 0px, 700px);">
					<img src="./img/t6.png">
					<div class="swiper-slide-shadow-left" style="opacity: 1; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 0; transition-duration: 0ms;"></div>
				</div>
				<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0"
					style="width: 700px; transition-duration: 0ms; transform: rotateX(0deg) rotateY(630deg) translate3d(-700px, 0px, 4900px);">
					<img src="./img/t1.png">
					<div class="swiper-slide-shadow-left" style="opacity: 1; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 0; transition-duration: 0ms;"></div>
				</div>
				<div class="swiper-cube-shadow"
					style="height: 700px; transform: translate3d(0px, 450px, -350px) rotateX(90deg) rotateZ(0deg) scale(0.6);">
				</div>
			</div>
			<!-- 导航按钮 上一页下一页 -->
			<div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
			<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"></div>
			<!-- 分页器 -->
			<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-bullets-dynamic"
				style="width: 80px;"><span class="swiper-pagination-bullet swiper-pagination-bullet-active-prev-prev"
					tabindex="0" role="button" aria-label="Go to slide 1" style="left: 0px;"></span><span
					class="swiper-pagination-bullet swiper-pagination-bullet-active-prev" tabindex="0" role="button"
					aria-label="Go to slide 2" style="left: 0px;"></span><span
					class="swiper-pagination-bullet swiper-pagination-bullet-active swiper-pagination-bullet-active-main"
					tabindex="0" role="button" aria-label="Go to slide 3" style="left: 0px;"></span><span
					class="swiper-pagination-bullet swiper-pagination-bullet-active-next" tabindex="0" role="button"
					aria-label="Go to slide 4" style="left: 0px;"></span><span
					class="swiper-pagination-bullet swiper-pagination-bullet-active-next-next" tabindex="0"
					role="button" aria-label="Go to slide 5" style="left: 0px;"></span><span
					class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 6"
					style="left: 0px;"></span></div>
			<!-- 滚动条 -->
			<div class="swiper-scrollbar" style="opacity: 0; transition-duration: 400ms;">
				<div class="swiper-scrollbar-drag"
					style="transform: translate3d(257.25px, 0px, 0px); width: 85.75px; transition-duration: 0ms;"></div>
			</div>
			<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
		</div>

		<p>覆盖流3d切换</p>
		<div class="swiper-container swiper-container-coverflow swiper-container-3d swiper-container-initialized swiper-container-horizontal"
			id="case7">
			<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-4281.75px, 0px, 0px);">
				<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="1"
					style="width: 951.5px; transition-duration: 0ms; transform: translate3d(100px, 0px, -600px) rotateX(0deg) rotateY(300deg); z-index: -9;">
					<img src="./img/t2.png">
					<div class="swiper-slide-shadow-left" style="opacity: 10; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 0; transition-duration: 0ms;"></div>
				</div>
				<div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-prev" data-swiper-slide-index="2"
					style="width: 951.5px; transition-duration: 0ms; transform: translate3d(79.9895px, 0px, -479.937px) rotateX(0deg) rotateY(239.968deg); z-index: -7;">
					<img src="./img/t4.png">
					<div class="swiper-slide-shadow-left" style="opacity: 7.99895; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 0; transition-duration: 0ms;"></div>
				</div>
				<div class="swiper-slide swiper-slide-duplicate-active" data-swiper-slide-index="0"
					style="width: 951.5px; transition-duration: 0ms; transform: translate3d(60px, 0px, -360px) rotateX(0deg) rotateY(180deg); z-index: -5;">
					<img src="./img/t1.png">
					<div class="swiper-slide-shadow-left" style="opacity: 6; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 0; transition-duration: 0ms;"></div>
				</div>
				<div class="swiper-slide swiper-slide-duplicate-next" data-swiper-slide-index="1"
					style="width: 951.5px; transition-duration: 0ms; transform: translate3d(39.9895px, 0px, -239.937px) rotateX(0deg) rotateY(119.968deg); z-index: -3;">
					<img src="./img/t2.png">
					<div class="swiper-slide-shadow-left" style="opacity: 3.99895; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 0; transition-duration: 0ms;"></div>
				</div>
				<div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="2"
					style="width: 951.5px; transition-duration: 0ms; transform: translate3d(20px, 0px, -120px) rotateX(0deg) rotateY(60deg); z-index: -1;">
					<img src="./img/t4.png">
					<div class="swiper-slide-shadow-left" style="opacity: 2; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 0; transition-duration: 0ms;"></div>
				</div>
				<div class="swiper-slide swiper-slide-duplicate swiper-slide-active" data-swiper-slide-index="0"
					style="width: 951.5px; transition-duration: 0ms; transform: translate3d(-0.0105097px, 0px, -0.0630583px) rotateX(0deg) rotateY(-0.0315292deg); z-index: 1;">
					<img src="./img/t1.png">
					<div class="swiper-slide-shadow-left" style="opacity: 0; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 0.00105097; transition-duration: 0ms;"></div>
				</div>
				<div class="swiper-slide swiper-slide-duplicate swiper-slide-next" data-swiper-slide-index="1"
					style="width: 951.5px; transition-duration: 0ms; transform: translate3d(-20px, 0px, -120px) rotateX(0deg) rotateY(-60deg); z-index: -1;">
					<img src="./img/t2.png">
					<div class="swiper-slide-shadow-left" style="opacity: 0; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 2; transition-duration: 0ms;"></div>
				</div>
			</div>
			<!-- 导航按钮 上一页下一页 -->
			<div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
			<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"></div>
			<!-- 分页器 -->
			<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-bullets-dynamic"
				style="width: 80px;"><span
					class="swiper-pagination-bullet swiper-pagination-bullet-active swiper-pagination-bullet-active-main"
					tabindex="0" role="button" aria-label="Go to slide 1" style="left: 16px;"></span><span
					class="swiper-pagination-bullet swiper-pagination-bullet-active-next" tabindex="0" role="button"
					aria-label="Go to slide 2" style="left: 16px;"></span><span
					class="swiper-pagination-bullet swiper-pagination-bullet-active-next-next" tabindex="0"
					role="button" aria-label="Go to slide 3" style="left: 16px;"></span></div>
			<!-- 滚动条 -->
			<div class="swiper-scrollbar" style="opacity: 0; transition-duration: 400ms;">
				<div class="swiper-scrollbar-drag"
					style="width: 532.857px; transform: translate3d(1110.12px, 0px, 0px); transition-duration: 0ms;">
				</div>
			</div>
			<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
		</div>
		<p>翻转轮播</p>
		<div class="swiper-container swiper-container-flip swiper-container-3d swiper-container-initialized swiper-container-horizontal"
			id="case8">
			<div class="swiper-wrapper" style="transition-duration: 0ms;">
				<div class="swiper-slide swiper-slide-duplicate swiper-slide-next swiper-slide-duplicate-prev"
					data-swiper-slide-index="2"
					style="width: 700px; z-index: 4; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(-180deg); transition-duration: 0ms;">
					<img src="./img/t3.png">
					<div class="swiper-slide-shadow-left" style="opacity: 0; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 1; transition-duration: 0ms;"></div>
				</div>
				<div class="swiper-slide swiper-slide-duplicate-active" data-swiper-slide-index="0"
					style="width: 700px; z-index: 4; transform: translate3d(-700px, 0px, 0px) rotateX(0deg) rotateY(-180deg); transition-duration: 0ms;">
					<img src="./img/t1.png">
					<div class="swiper-slide-shadow-left" style="opacity: 0; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 1; transition-duration: 0ms;"></div>
				</div>
				<div class="swiper-slide" data-swiper-slide-index="1"
					style="width: 700px; z-index: 4; transform: translate3d(-1400px, 0px, 0px) rotateX(0deg) rotateY(-180deg); transition-duration: 0ms;">
					<img src="./img/t2.png">
					<div class="swiper-slide-shadow-left" style="opacity: 0; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 1; transition-duration: 0ms;"></div>
				</div>
				<div class="swiper-slide swiper-slide-prev swiper-slide-duplicate-next" data-swiper-slide-index="2"
					style="width: 700px; z-index: 4; transform: translate3d(-2100px, 0px, 0px) rotateX(0deg) rotateY(-180deg); transition-duration: 0ms;">
					<img src="./img/t3.png">
					<div class="swiper-slide-shadow-left" style="opacity: 0; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 1; transition-duration: 0ms;"></div>
				</div>
				<div class="swiper-slide swiper-slide-duplicate swiper-slide-active" data-swiper-slide-index="0"
					style="width: 700px; z-index: 5; transform: translate3d(-2800px, 0px, 0px) rotateX(0deg) rotateY(0deg); transition-duration: 0ms;">
					<img src="./img/t1.png">
					<div class="swiper-slide-shadow-left" style="opacity: 0; transition-duration: 0ms;"></div>
					<div class="swiper-slide-shadow-right" style="opacity: 0; transition-duration: 0ms;"></div>
				</div>
			</div>
			<!-- 导航按钮 上一页下一页 -->
			<div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
			<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"></div>
			<!-- 分页器 -->
			<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-bullets-dynamic"
				style="width: 80px;"><span
					class="swiper-pagination-bullet swiper-pagination-bullet-active swiper-pagination-bullet-active-main"
					tabindex="0" role="button" aria-label="Go to slide 1" style="left: 16px;"></span><span
					class="swiper-pagination-bullet swiper-pagination-bullet-active-next" tabindex="0" role="button"
					aria-label="Go to slide 2" style="left: 16px;"></span><span
					class="swiper-pagination-bullet swiper-pagination-bullet-active-next-next" tabindex="0"
					role="button" aria-label="Go to slide 3" style="left: 16px;"></span></div>
			<!-- 滚动条 -->
			<div class="swiper-scrollbar" style="opacity: 0; transition-duration: 400ms;">
				<div class="swiper-scrollbar-drag"
					style="width: 137.2px; transform: translate3d(548.8px, 0px, 0px); transition-duration: 0ms;"></div>
			</div>
			<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
		</div>
		<script type="text/javascript">
			<!--水平切换  
			-->
			var
			mySwiper
			=
			new
			Swiper('#case1',
			{
			autoplay:
			true, //可选选项，自动滑动
			initialSlide
			: 1, //默认显示第二张图片索引从0开始
			speed: 2000, //设置过度时间
			/*
			grabCursor:
			true, //鼠标样式根据浏览器不同而定
			*/
			autoplay
			:
			{
			delay: 1000,
			disableOnInteraction:
			false,
			},
			/*
			设置每隔3000毫秒切换
			*/
		<!-- 分页器 -->
		pagination: {
		el: '.swiper-pagination',
		clickable :true,
		},
		<!-- 导航按钮 上一页下一页 -->
		navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
		},
		<!-- 滚动条 -->
		scrollbar: {
		el: '.swiper-scrollbar',
		hide:true,
		},
		});
		/* 垂直切换 */
		var mySwiper2 = new Swiper("#case2",{
		direction : 'vertical', //垂直轮播
		autoplay: true,//可选选项，自动滑动
		initialSlide :1,//默认显示第二张图片索引从0开始
		speed:2000,//设置过度时间
		/* grabCursor: true,//鼠标样式根据浏览器不同而定 */
		autoplay : {
		delay:1000,
		disableOnInteraction: false,
		}, /* 设置每隔3000毫秒切换 */
		<!-- 分页器 -->
		pagination: {
		el: '.swiper-pagination',
		clickable :true,
		},
		<!-- 导航按钮 上一页下一页 -->
		navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
		},
		<!-- 滚动条 -->
		scrollbar: {
		el: '.swiper-scrollbar',
		hide:true,
		},
		});
		/* 视差轮播 */
		var mySwiper3 = new Swiper("#case3",{
		loop : true, //允许从第一张到最后一张，或者从最后一张到第一张 循环属性
		parallax : true,//视差位移动画
		autoplay: true,//可选选项，自动滑动
		initialSlide :0,//默认显示第二张图片索引从0开始
		speed:2000,//设置过度时间
		/* grabCursor: true,//鼠标样式根据浏览器不同而定 */
		autoplay : {
		delay:1000,
		disableOnInteraction: false,
		}, /* 设置每隔3000毫秒切换 */
		<!-- 分页器 -->
		pagination: {
		el: '.swiper-pagination',
		clickable :true,
		},
		<!-- 导航按钮 上一页下一页 -->
		navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
		},
		<!-- 滚动条 -->
		scrollbar: {
		el: '.swiper-scrollbar',
		hide:true,
		},
		});
		/* 幻灯片轮播*/
		var mySwiper4 = new Swiper("#case4",{
		loop : true, //允许从第一张到最后一张，或者从最后一张到第一张 循环属性
		slidesPerView :3, // 设置显示三张
		centeredSlides : true, //使当前图片居中显示
		centeredSlidesBounds: true, //使左右两边的图片始终贴合边缘
		/* slidesOffsetBefore : 100, //偏移，使第一张图片向右偏移100px */
		autoplay: true,//可选选项，自动滑动
		initialSlide :0,//默认显示第二张图片索引从0开始
		speed:2000,//设置过度时间
		/* grabCursor: true,//鼠标样式根据浏览器不同而定 */
		autoplay : {
		delay:1000,
		disableOnInteraction: false,
		}, /* 设置每隔3000毫秒切换 */
		<!-- 分页器 -->
		pagination: {
		el: '.swiper-pagination',
		clickable :true,
		},
		<!-- 导航按钮 上一页下一页 -->
		navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
		},
		<!-- 滚动条 -->
		scrollbar: {
		el: '.swiper-scrollbar',
		hide:true,
		},
		});
		/*渐变轮播 */
		var mySwiper = new Swiper('#case5', {
		loop : true, //允许从第一张到最后一张，或者从最后一张到第一张 循环属性
		parallax : true, //视差位移动画
		effect : 'fade', //轮播效果，fade渐变
		autoplay: true, //可选选项，自动滑动
		initialSlide :1,//默认显示第二张图片索引从0开始
		speed:3000,//设置过度时间
		/* grabCursor: true,//鼠标样式根据浏览器不同而定 */
		autoplay : {
		delay:1000,
		disableOnInteraction: false,
		}, /* 设置每隔3000毫秒切换 */
		<!-- 分页器 -->
		pagination: {
		el: '.swiper-pagination',
		clickable :true, /* 可点击切换 */
		dynamicBullets: true, /* 动力球样式 */
		},
		<!-- 导航按钮 上一页下一页 -->
		navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
		},
		<!-- 滚动条 -->
		scrollbar: {
		el: '.swiper-scrollbar',
		hide:true,
		},

		});
		/* 立方轮播 */
		var mySwiper = new Swiper('#case6', {
		keyboard : true, //启用键盘左右切换
		loop : true, //允许从第一张到最后一张，或者从最后一张到第一张 循环属性
		parallax : true, //视差位移动画
		effect : 'cube', //轮播效果，cube立方轮播
		autoplay: true, //可选选项，自动滑动
		initialSlide :0,//默认显示第二张图片索引从0开始
		speed:3000,//设置过度时间
		/* grabCursor: true,//鼠标样式根据浏览器不同而定 */
		autoplay : {
		delay:1000,
		disableOnInteraction: false,
		}, /* 设置每隔3000毫秒切换 */
		<!-- 分页器 -->
		pagination: {
		el: '.swiper-pagination',
		clickable :true, /* 可点击切换 */
		dynamicBullets: true, /* 动力球样式 */
		},
		<!-- 导航按钮 上一页下一页 -->
		navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
		hideOnClick: true,
		},
		<!-- 滚动条 -->
		scrollbar: {
		el: '.swiper-scrollbar',
		hide:true,
		},
		/* 立方轮播属性 */
		cubeEffect: {
		slideShadows: true,
		shadow: true,
		shadowOffset: 100,
		shadowScale: 0.6
		},
		});
		/* 覆盖流3d切换 */
		var mySwiper = new Swiper('#case7', {
		loop : true, //允许从第一张到最后一张，或者从最后一张到第一张 循环属性
		effect : 'coverflow', //轮播效果，coverflow覆盖流效果
		slidesPerView :2,
		centeredSlides: true,
		autoplay: true, //可选选项，自动滑动
		initialSlide :1,//默认显示第二张图片索引从0开始
		speed:3000,//设置过度时间
		/* grabCursor: true,//鼠标样式根据浏览器不同而定 */
		autoplay : {
		delay:1000,
		disableOnInteraction: false,
		}, /* 设置每隔3000毫秒切换 */
		<!-- 分页器 -->
		pagination: {
		el: '.swiper-pagination',
		clickable :true, /* 可点击切换 */
		dynamicBullets: true, /* 动力球样式 */
		},
		<!-- 导航按钮 上一页下一页 -->
		navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
		},
		<!-- 滚动条 -->
		scrollbar: {
		el: '.swiper-scrollbar',
		hide:true,
		},
		//复流效应相关属性
		coverflowEffect: {
		rotate: 30,
		stretch: 10,
		depth: 60,
		modifier: 2,
		slideShadows : true
		},
		});
		/* 翻转效果轮播 */
		var mySwiper = new Swiper('#case8', {
		zomm :true, //变焦属性，可以放大图片
		loop : true, //允许从第一张到最后一张，或者从最后一张到第一张 循环属性
		effect : 'flip', //轮播效果，flip翻转效果
		slidesPerView :2,
		centeredSlides: true,
		autoplay: true, //可选选项，自动滑动
		initialSlide :1,//默认显示第二张图片索引从0开始
		speed:3000,//设置过度时间
		/* grabCursor: true,//鼠标样式根据浏览器不同而定 */
		autoplay : {
		delay:1000,
		disableOnInteraction: false,
		}, /* 设置每隔3000毫秒切换 */
		<!-- 分页器 -->
		pagination: {
		el: '.swiper-pagination',
		clickable :true, /* 可点击切换 */
		dynamicBullets: true, /* 动力球样式 */
		},
		<!-- 导航按钮 上一页下一页 -->
		navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
		},
		<!-- 滚动条 -->
		scrollbar: {
		el: '.swiper-scrollbar',
		hide:true,
		},
		coverflowEffect: {
		rotate: 30,
		stretch: 10,
		depth: 60,
		modifier: 2,
		slideShadows : true
		},
		});
		</script>


	</body>
</html>